<template>
  <Row>
    <Col span="24">
    <Card :bordered="true" :dis-hover="false" :padding="8">
      <!--表格-->
      <p slot="title" style="height:38px;">
        <Button-group>
          <Button type="ghost" size="large" icon="plus-round" @click.native="rootAdd">添加</Button>
          <!--<Button type="ghost" size="large" icon="edit" @click="updateForce">修改</Button>
          <Button type="ghost" size="large" icon="trash-b" @click="deleteForce">删除</Button>-->
        </Button-group>
        <Input v-model="forceQuery.text" @on-enter="searchText" placeholder="查询..." style="max-width: 600px;float: right;">
        <Button slot="append" icon="ios-search" @click="searchText"></Button>
        </Input>
      </p>
      <!--表格-->
      <Table border :columns="table_show" :data="table_data"></Table>
      <!--分页-->
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :current="forceQuery.page" @on-change='changePage' :total="forceQuery.total" simple></Page>
        </div>
      </div>
    </Card>
    </Col>

    <!--添加/修改 根菜单模态框 -->
    <Modal v-model="root_menu_show" :mask-closable="false" ok-text="保存" :title="doing + '根菜单'" @on-ok="rootSave('rootMenuForm')" @on-cancel="rootCancel">
      <!--表单-->
      <Form ref="rootMenuForm" :model="rootMenuForm" :rules="rootMenuValidate" :label-width="60" label-position="right">
        <Form-item label="编号">
          <Input v-model="rootMenuForm.id" placeholder="添加为空" disabled></Input>
        </Form-item>
        <Form-item label="名称" prop="rootMenuForm">
          <Input v-model="rootMenuForm.forceName" placeholder="请输入名称.." :maxlength="10" required></Input>
        </Form-item>
        <Form-item label="路由" prop="rootMenuForm">
          <Input v-model="rootMenuForm.forceUrl" placeholder="请输入路由.." :maxlength="64" required></Input>
        </Form-item>
        <Form-item label="图标" prop="rootMenuForm">
          <Input v-model="rootMenuForm.forceIcon" placeholder="请输入图标的代码" :maxlength="64" required @on-enter="rootSave('rootMenuForm')">
          <Button slot="prepend" :icon="comRootMenuIcon"></Button>
          </Input>
          <p>图标地址:
            <a href="https://www.iviewui.com/components/icon" target="_blank">https://www.iviewui.com/components/icon</a>
          </p>
        </Form-item>
      </Form>
    </Modal>

    <!--添加/修改 子菜单模态框 -->
    <Modal v-model="son_menu_show" :mask-closable="false" ok-text="保存" :title="doing + sonMenuForm.rootMenuName +'子菜单'" @on-ok="sonSave('sonMenuForm')" @on-cancel="sonCancel">
      <!--表单-->
      <Form ref="sonMenuForm" :model="sonMenuForm" :rules="sonMenuValidate" :label-width="60" label-position="right">
        <Form-item label="编号">
          <Input v-model="sonMenuForm.id" placeholder="添加为空" disabled></Input>
        </Form-item>
        <Form-item label="名称" prop="sonMenuForm">
          <Input v-model="sonMenuForm.forceName" placeholder="请输入名称.." :maxlength="10" required></Input>
        </Form-item>
        <Form-item label="路由" prop="sonMenuForm">
          <Input v-model="sonMenuForm.forceUrl" placeholder="请输入路由.." :maxlength="64" required></Input>
        </Form-item>
        <Form-item label="图标" prop="sonMenuForm">
          <Input v-model="sonMenuForm.forceIcon" placeholder="请输入图标的代码" :maxlength="64" required @on-enter="sonSave('sonMenuForm')">
          <Button slot="prepend" :icon="comSonMenuIcon"></Button>
          </Input>
          <p>图标地址:
            <a href="https://www.iviewui.com/components/icon" target="_blank">https://www.iviewui.com/components/icon</a>
          </p>
        </Form-item>
      </Form>
    </Modal>

    <!--添加/修改 权限菜单模态框 -->
    <Modal v-model="force_menu_show" :mask-closable="false" ok-text="保存" :title="doing + forceMenuForm.sonMenuName +'子菜单'" @on-ok="forceSave('forceMenuForm')" @on-cancel="forceCancel">
      <!--表单-->
      <Form ref="forceMenuForm" :model="forceMenuForm" :rules="forceMenuValidate" :label-width="60" label-position="right">
        <Form-item label="编号">
          <Input v-model="forceMenuForm.id" placeholder="添加为空" disabled></Input>
        </Form-item>
        <Form-item label="名称" prop="forceMenuForm">
          <Input v-model="forceMenuForm.forceName" placeholder="请输入名称.." :maxlength="10" required></Input>
        </Form-item>
      </Form>
    </Modal>

  </Row>
</template>

<script>
  import forceApi from '@/api/forceApi'

  export default {
    computed: {
      comRootMenuIcon() {
        var arr = this.rootMenuForm.forceIcon.split('"')
        if(arr && arr.length > 2)
          return arr[1]
        return ''
      },
      comSonMenuIcon() {
        var arr = this.sonMenuForm.forceIcon.split('"')
        if(arr && arr.length > 2)
          return arr[1]
        return ''
      }
    },
    data() {
      return {
        doing: '添加',
        grandson_table_colums: [{
          title: '编号',
          width: 160,
          key: 'id',
          align: 'center'
        }, {
          title: '权限名称',
          align: 'center',
          key: 'force_name'
        }, {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [h('Button', {
              props: {
                type: 'ghost',
                shape: 'circle',
                size: 'small'
              },
              on: {
                click: () => {
                  this.doing = '修改'
                  this.forceMenuForm.id = params.row.id
                  this.forceMenuForm.level = params.row.level
                  this.forceMenuForm.forceName = params.row.force_name
                  this.forceMenuForm.sonMenuId = params.row.sonMenuId
                  this.forceMenuForm.sonMenuName = '-' + params.row.sonMenuName + '-'
                  this.force_menu_show = true
                }
              }
            }, '修改权限'), h('Button', {
              props: {
                type: 'ghost',
                shape: 'circle',
                size: 'small'
              },
              on: {
                click: () => {
                  this.deleteForce(params.row.id)
                }
              }
            }, '删除权限')]);
          }
        }],
        son_table_colums: [{
          title: '#',
          type: 'expand',
          width: 100,
          render: (h, params) => {
            var son_table_data = !(params.row.sonForces && params.row.sonForces.length > 0) ? [] : params.row.sonForces
            son_table_data.forEach(function(item, index, input) {
              item.sonMenuId = params.row.id
              item.sonMenuName = params.row.force_name
            })

            return h('Table', {
              props: {
                data: son_table_data,
                columns: this.grandson_table_colums,
                showHeader: false
              }
            })
          }
        }, {
          title: '编号',
          width: 160,
          key: 'id',
          align: 'center'
        }, {
          title: '图标',
          width: 140,
          align: 'center',
          render: (h, params) => {
            var arr = params.row.force_icon.split("\"")
            return h('Icon', {
              props: {
                type: (arr && arr.length > 2) ? arr[1] : '',
                size: 18
              }
            });
          }
        }, {
          title: '权限名称',
          align: 'center',
          key: 'force_name'
        }, {
          title: '权限路由',
          align: 'center',
          key: 'force_url'
        }, {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [h('Button', {
              props: {
                type: 'ghost',
                shape: 'circle',
                size: 'small'
              },
              on: {
                click: () => {
                  this.doing = '修改'
                  this.son_menu_show = true
                  this.sonMenuForm.id = params.row.id
                  this.sonMenuForm.level = params.row.level
                  this.sonMenuForm.forceUrl = params.row.force_url
                  this.sonMenuForm.forceName = params.row.force_name
                  this.sonMenuForm.forceIcon = params.row.force_icon
                  this.sonMenuForm.rootMenuId = params.row.rootMenuId
                  this.sonMenuForm.rootMenuName = '-' + params.row.rootMenuName + '-'
                }
              }
            }, '修改子菜单'), h('Button', {
              props: {
                type: 'ghost',
                shape: 'circle',
                size: 'small'
              },
              on: {
                click: () => {
                	this.forceMenuForm.sonMenuId = params.row.id
                	this.forceMenuForm.sonMenuName = params.row.force_name
                  this.force_menu_show = true
                  this.doing = '添加'
                }
              }
            }, '添加权限'), h('Button', {
              props: {
                type: 'ghost',
                shape: 'circle',
                size: 'small'
              },
              on: {
                click: () => {
                  this.deleteForce(params.row.id)
                }
              }
            }, '删除子菜单')]);
          }
        }],
        table_show: [{
          title: '#',
          type: 'expand',
          width: 100,
          render: (h, params) => {
            var son_table_data = !(params.row.sonForces && params.row.sonForces.length > 0) ? [] : params.row.sonForces
            son_table_data.forEach(function(item, index, input) {
              item.rootMenuId = params.row.id
              item.rootMenuName = params.row.force_name
            })

            return h('Table', {
              props: {
                data: son_table_data,
                columns: this.son_table_colums,
                showHeader: false
              }
            })
          }
        }, {
          title: '编号',
          width: 160,
          key: 'id',
          align: 'center'
        }, {
          title: '图标',
          width: 140,
          align: 'center',
          render: (h, params) => {
            var arr = params.row.force_icon.split("\"")
            return h('Icon', {
              props: {
                type: (arr && arr.length > 2) ? arr[1] : '',
                size: 18
              }
            });
          }
        }, {
          title: '权限名称',
          align: 'center',
          key: 'force_name'
        }, {
          title: '权限路由',
          align: 'center',
          key: 'force_url'
        }, {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [h('Button', {
              props: {
                type: 'ghost',
                shape: 'circle',
                size: 'small'
              },
              on: {
                click: () => {
                  this.doing = '修改'
                  this.root_menu_show = true
                  this.rootMenuForm.id = params.row.id
                  this.rootMenuForm.forceUrl = params.row.force_url
                  this.rootMenuForm.forceName = params.row.force_name
                  this.rootMenuForm.forceIcon = params.row.force_icon
                }
              }
            }, '修改菜单'), h('Button', {
              props: {
                type: 'ghost',
                shape: 'circle',
                size: 'small'
              },
              on: {
                click: () => {
                  this.sonMenuForm.rootMenuId = params.row.id
                  this.sonMenuForm.rootMenuName = '-' + params.row.force_name + '-'
                  this.son_menu_show = true
                }
              }
            }, '添加子菜单'), h('Button', {
              props: {
                type: 'ghost',
                shape: 'circle',
                size: 'small'
              },
              on: {
                click: () => {
                  this.deleteForce(params.row.id)
                }
              }
            }, '删除菜单')]);
          }
        }],
        table_data: [],
        on_select: [],
        forceQuery: {
          text: '',
          page: 1,
          size: 10,
          total: 0
        },
        forceForm: {
          id: '',
          forceName: '',
          isBack: '',
          rootMenuId: '',
          forceRoute: '',
          forceIcon: '',
          isForce: ''
        },
        rootMenuValidate: {
          id: [{
            required: false
          }],
          forceName: [{
            required: true,
            message: '权限名不能为空',
            trigger: 'blur'
          }],
          forceUrl: [{
            required: false
          }],
          forceIcon: [{
            required: true,
            message: '图标不能为空',
            trigger: 'blur'
          }]
        },
        rootMenuForm: {
          id: '',
          forceName: '',
          level: '',
          forceUrl: '',
          forceIcon: ''
        },
        root_menu_show: false,
        sonMenuValidate: {
          id: [{
            required: false
          }],
          forceName: [{
            required: true,
            message: '权限名不能为空',
            trigger: 'blur'
          }],
          forceUrl: [{
            required: false
          }],
          forceIcon: [{
            required: true,
            message: '图标不能为空',
            trigger: 'blur'
          }]
        },
        sonMenuForm: {
          id: '',
          rootMenuName: '',
          rootMenuId: '',
          forceName: '',
          level: '',
          forceUrl: '',
          forceIcon: ''
        },
        son_menu_show: false,
        forceMenuValidate: {
          id: [{
            required: false
          }],
          forceName: [{
            required: true,
            message: '权限名不能为空',
            trigger: 'blur'
          }],
          forceUrl: [{
            required: false
          }],
          forceIcon: [{
            required: true,
            message: '图标不能为空',
            trigger: 'blur'
          }]
        },
        forceMenuForm: {
          id: '',
          sonMenuName: '',
          sonMenuId: '',
          forceName: '',
          level: ''
        },
        force_menu_show: false
      }
    },
    methods: {
      forceAdd() {
        this.doing = '添加'
        this.forceMenuFormReset()
        this.force_menu_show = true
      },
      forceMenuFormReset() {
        this.forceMenuForm.id = ''
        this.forceMenuForm.forceUrl = ''
        this.forceMenuForm.rootMenuId = ''
        this.forceMenuForm.forceName = ''
        this.forceMenuForm.forceIcon = ''
        this.forceMenuForm.level = ''
      },
      forceCancel() {
        this.forceMenuFormReset()
        this.force_menu_show = false
      },
      forceSave(name) {
        var vm = this
        this.$refs[name].validate((valid) => {
          if(valid) {
            this.$Modal.confirm({
              title: '系统提示',
              content: '<p>确认保存这条<br> ' +
                '菜     单:<font style="color:red">' + (this.forceMenuForm.sonMenuName) + '</font> <br>' +
                '编     号:<font style="color:red">' + (this.forceMenuForm.id ? this.forceMenuForm.id : '暂无') + '</font> <br>' +
                '名     称:<font style="color:red">' + this.forceMenuForm.forceName + '</font></p>',
              onOk: () => {
                var msg = this.$Message.loading({
                  content: '正在保存中...',
                  duration: 0
                })
                forceApi.saveForceMenu(this.forceMenuForm).then((data) => {
                  vm.findForce()
                  vm.forceMenuFormReset()
                  vm.$Message.destroy()
                }).catch((errMsg) => {
                  this.$Message.destroy()
                })
              },
              onCancel: () => {}
            });
          } else {
            this.$Message.error('表单验证失败!');
          }
        })
      },
      sonAdd() {
        this.doing = '添加'
        this.sonMenuFormReset()
        this.son_menu_show = true
      },
      sonMenuFormReset() {
        this.sonMenuForm.id = ''
        this.sonMenuForm.forceUrl = ''
        this.sonMenuForm.rootMenuId = ''
        this.sonMenuForm.forceName = ''
        this.sonMenuForm.forceIcon = ''
        this.sonMenuForm.level = ''
      },
      sonCancel() {
        this.sonMenuFormReset()
        this.son_menu_show = false
      },
      sonSave(name) {
        var vm = this
        this.$refs[name].validate((valid) => {
          if(valid) {
            this.$Modal.confirm({
              title: '系统提示',
              content: '<p>确认保存这条<br> ' +
                '根菜单:<font style="color:red">' + (this.sonMenuForm.rootMenuName) + '</font> <br>' +
                '编     号:<font style="color:red">' + (this.sonMenuForm.id ? this.sonMenuForm.id : '暂无') + '</font> <br>' +
                '名     称:<font style="color:red">' + this.sonMenuForm.forceName + '</font></p>' +
                '路     由:<font style="color:red">' + this.sonMenuForm.forceUrl + '</font></p>' +
                '图     标:<font style="color:red"><i class="ivu-icon ivu-icon-' + (this.comSonMenuIcon) + '"></i></font></p>',
              onOk: () => {
                var msg = this.$Message.loading({
                  content: '正在保存中...',
                  duration: 0
                })
                forceApi.saveSonMenu(this.sonMenuForm).then((data) => {
                  vm.findForce()
                  vm.sonMenuFormReset()
                  vm.$Message.destroy()
                }).catch((errMsg) => {
                  this.$Message.destroy()
                })
              },
              onCancel: () => {}
            });
          } else {
            this.$Message.error('表单验证失败!');
          }
        })
      },
      rootAdd() {
        this.doing = '添加'
        this.rootMenuReset()
        this.root_menu_show = true
      },
      rootMenuReset() {
        this.rootMenuForm.id = ''
        this.rootMenuForm.forceUrl = ''
        this.rootMenuForm.forceName = ''
        this.rootMenuForm.forceIcon = ''
        this.rootMenuForm.level = ''
      },
      rootCancel() {
        this.rootMenuReset()
        this.root_menu_show = false
      },
      rootSave(name) {
        var vm = this
        this.$refs[name].validate((valid) => {
          if(valid) {
            this.$Modal.confirm({
              title: '系统提示',
              content: '<p>确认保存这条<br> ' +
                '编     号:<font style="color:red">' + (this.rootMenuForm.id ? this.rootMenuForm.id : '暂无') + '</font> <br>' +
                '名     称:<font style="color:red">' + this.rootMenuForm.forceName + '</font></p>' +
                '路     由:<font style="color:red">' + this.rootMenuForm.forceUrl + '</font></p>' +
                '图     标:<font style="color:red"><i class="ivu-icon ivu-icon-' + this.comRootMenuIcon + '"></i></font></p>',
              onOk: () => {
                var msg = this.$Message.loading({
                  content: '正在保存中...',
                  duration: 0
                })
                forceApi.saveRootMenu(this.rootMenuForm).then((data) => {
                  vm.findForce()
                  vm.rootMenuReset()
                  vm.$Message.destroy()
                }).catch((errMsg) => {
                  this.$Message.destroy()
                })
              },
              onCancel: () => {}
            });
          } else {
            this.$Message.error('表单验证失败!');
          }
        })
      },
      changePage(index) {
        this.forceQuery.page = index
        this.findForce()
      },
      searchText() {
        this.findForce()
      },
      findForce() {
        var vm = this
        forceApi.findForce(this.forceQuery).then((data) => {
          vm.table_data = data.list
          vm.forceQuery.total = data.totalRow
        }).catch((errMsg) => {

        })
      },
      deleteForce(id) {
        if(id) {
          this.$Modal.confirm({
            title: '系统提示',
            content: '<p>确认删除这条编号为 <font style="color:red;">' + id + '</font> 的数据吗?<br>',
            onOk: () => {
              var msg = this.$Message.loading({
                content: '正在删除中...',
                duration: 0
              })
              forceApi.deleteForce(id).then((data) => {
                this.findForce()
                this.$Message.destroy()
              }).catch((errMsg) => {
                this.$Message.destroy()
              })
            },
            onCancel: () => {}
          });
        }
      }
    },
    mounted() {
      this.findForce()
    },
    watch: {}
  }
</script>

<style>

</style>